<!doctype html>
<html lang="en">
	<head>
		<meta charset= "utf-8"/>
		<title>Final Project - Space and Earth Exploration</title>
		<script src="scripts/SCORM_API_wrapper.js" language="javascript"></script>
		<script src="scripts/sessionstorage.1.4.js" language="javascript"></script>
		<script src="scripts/scripts.js" language="javascript"></script>
		<script src="scripts/drag-drap.js""scripts/scripts.js" language="javascript"></script>
		<link href="styles/styles.css" rel="stylesheet" type="text/css"/>

	</head>
	
	<body>

		<section>
			<div id="logo">
			<div><img  src="images/mastermindlogo1.png" width="230px" alt="The logo" title="The logo"/></div>
			</div><br>
			
			<header><img src="images/activity-header.jpg" alt="Sun Avtiviy Header" title="Sun Avtiviy Header"/></header><br/>
			
				<br/>
			 	<nav id="navigation">
				    	<div class="barbuttons2"><a href= "home-page.html">Home</a></div>
	    				<div class="barbuttons2"><a href= "moon-page1.html">Moon</a></div>
	    				<div class="barbuttons2"><a href= "sun-page1.html">Sun</a></div>
						<div class="barbuttons2"><a href="earth-page1.html" >Earth</a></div>
				
				 	<div id="test-Link" ><a href="final-test.html"><strong>TEST</strong></a></div>
				</nav><br/> <br/>
			
			
	    		<div id="container">
				  	<div id="rightBar2">
					  		<aside>	
							<header>
								<p id="aside-title-audio">Audio</p>
							</header>
								<audio id="narration2" controls="controls">
									<source src="audio/activity.mp3" type="audio/mp3">
									<source src="audio/activity.ogg" type="audio/ogg">
								</audio><br/>
								
							<header>
								<p id="aside-title-audio">Transcript</p>
							</header>
							<div id="transcript">
									<p>This is a drag and drop activity. Please match the correct answers on column A by dragging and dropping to best answers on column B</p>
							</div>
							</aside>
						</div>
			
				  <div id="activity-Content">
            <section>
         		<form name="dd1" onsubmit="javascript:checkPage2(); return false;">  
                   <p class="centered">SUN TOPIC DRAG AND DROP ACTIVITY </p><br/>
                <p><strong>Instructions:</strong><br/>
                Match the correct answers by dragging the boxes from the A column and dropping them to the B column boxes</p>
				
				<div class="column">
						<h3>A</h3>
					 	<div id="d1" value="1" class="dragger" draggable="true"
				     		ondragstart="return startDrag( event )"
				     		ondragend="return endDrag( event )"><p>The age of the sun is</p></div><br/>  
				     		
				     	<div id="d2" value="3" class="dragger" draggable="true"
				     		ondragstart="return startDrag( event )"
				     		ondragend="return endDrag( event )"><p>The sun is at the center of the</p></div><br/>    
				     		                    
				 		<div id="d3" value="0" class="dragger" draggable="true"
				     		ondragstart="return startDrag( event )"
				     		ondragend="return endDrag( event )"><p>Last annular eclipse happened on</p></div><br/>  
				     		
					 	<div id="d4" value="2" class="dragger" draggable="true"
				     		ondragstart="return startDrag( event )"
				     		ondragend="return endDrag( event )"><p>Types of solar eclipse are</p></div><br/>
				
						<div id="d5" value="4" class="dragger" draggable="true"
				     		ondragstart="return startDrag( event )"
				     		ondragend="return endDrag( event )"><p>Last hybrid eclipse happened on</p></div><br/>
				</div>
				
				    
				<div class="column">
						<h3>B</h3>
				     	<div id="db1" value="0" class="draggerbay" 
				     		ondrop="return dropDragger( event )"
				     		ondragover="return false"
				     		ondragenter="return enterDragger( event )"><p>May 9, 2013</p></div><br/>           
				     		             
				 		<div id="db2" value="1" class="draggerbay"
				     		ondrop="return dropDragger( event )"
				     		ondragover="return false"
				     		ondragenter="return enterDragger( event )"><p>about 5 billion years</p></div><br/>  
				     		
					 	<div id="db3" value="2" class="draggerbay"
				     		ondrop="return dropDragger( event )"
				     		ondragover="return false"
				     		ondragenter="return enterDragger( event )"><p>four</p></div><br/> 
				     		
					 	<div id="db4" value="3" class="draggerbay"
				     		ondrop="return dropDragger( event )"
				     		ondragover="return false"
				     		ondragenter="return enterDragger( event )"><p>solar system</p></div><br/>  
				     	
				     	<div id="db5" value="4" class="draggerbay"
				     		ondrop="return dropDragger( event )"
				     		ondragover="return false"
				     		ondragenter="return enterDragger( event )"><p>Nov 3, 2013</p></div><br/>  
				     		

				</div>
				
				<p id="response-page2">&nbsp;</p>
				<input type="submit" name="button" value="Submit Your Answer"/><br/><br/>
				</form>
            </section>

				</div>
			<div id="footer"><br/>
				    <a class="movingButtons" href="sun-page4.html">Back</a>
				    <a class="movingButtons" href="earth-page1.html">EARTH</a>	
			</div>
				</div>
				 
		</section>
	</body>

</html>